<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表调试页面</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="../../frontend/assets/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50 p-6">
    <div class="max-w-6xl mx-auto">
        <h1 class="text-3xl font-bold text-gray-800 mb-6">博客列表调试页面</h1>
        
        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <h2 class="text-xl font-semibold mb-4">调试信息</h2>
            <div id="debugInfo" class="text-sm text-gray-600">
                <p>正在加载调试信息...</p>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-xl font-semibold mb-4">博客数据测试</h2>
            <button onclick="testLoadBlogs()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 mb-4">
                测试加载博客数据
            </button>
            
            <div id="blogData" class="mt-4">
                <p class="text-gray-500">点击按钮加载博客数据...</p>
            </div>
        </div>
    </div>

    <script>
        // 模拟commonManager
        window.commonManager = {
            formatDate: function(dateString) {
                if (!dateString) return '未设置';
                try {
                    const date = new Date(dateString);
                    return date.toLocaleDateString('zh-CN');
                } catch (e) {
                    return dateString;
                }
            },
            showSuccess: function(message) {
                console.log('Success:', message);
                document.getElementById('debugInfo').innerHTML = `<p class="text-green-600">✓ ${message}</p>`;
            },
            showError: function(message) {
                console.log('Error:', message);
                document.getElementById('debugInfo').innerHTML = `<p class="text-red-600">✗ ${message}</p>`;
            },
            confirm: async function(message, title) {
                return confirm(message);
            }
        };

        // 测试加载博客数据
        async function testLoadBlogs() {
            try {
                document.getElementById('debugInfo').innerHTML = '<p class="text-blue-600">正在加载博客数据...</p>';
                
                const response = await fetch('../../frontend/AiBlog/Blogs.json');
                if (response.ok) {
                    const data = await response.json();
                    const blogs = data.blogs || [];
                    
                    commonManager.showSuccess(`成功加载 ${blogs.length} 篇博客数据`);
                    
                    // 显示博客数据
                    if (blogs.length > 0) {
                        const firstBlog = blogs[0];
                        const blogInfo = `
                            <div class="mt-4 p-4 bg-gray-100 rounded border">
                                <h3 class="font-semibold mb-2">第一条博客数据：</h3>
                                <div class="grid grid-cols-2 gap-2 text-sm">
                                    <p><strong>ID:</strong> ${firstBlog.id}</p>
                                    <p><strong>标题:</strong> ${firstBlog.title}</p>
                                    <p><strong>摘要:</strong> ${firstBlog.summary ? firstBlog.summary.substring(0, 50) + '...' : '无'}</p>
                                    <p><strong>内容文件:</strong> ${firstBlog.contentFile || '无'}</p>
                                    <p><strong>分类:</strong> ${firstBlog.category || '无'}</p>
                                    <p><strong>标签:</strong> ${firstBlog.tags ? firstBlog.tags.join(', ') : '无'}</p>
                                    <p><strong>作者:</strong> ${firstBlog.author || '无'}</p>
                                    <p><strong>作者职称:</strong> ${firstBlog.authorTitle || '无'}</p>
                                    <p><strong>发布日期:</strong> ${firstBlog.publishDate || '无'}</p>
                                </div>
                            </div>
                        `;
                        document.getElementById('blogData').innerHTML = blogInfo;
                    }
                    
                    // 测试表格行生成
                    testTableRowGeneration(blogs);
                    
                } else {
                    throw new Error(`HTTP ${response.status}`);
                }
            } catch (error) {
                commonManager.showError(`加载博客数据失败: ${error.message}`);
                console.error('Error:', error);
            }
        }

        // 测试表格行生成
        function testTableRowGeneration(blogs) {
            if (blogs.length === 0) return;
            
            const blog = blogs[0];
            const publishDate = blog.publishDate ? commonManager.formatDate(blog.publishDate) : '未设置';
            const tags = blog.tags ? blog.tags.join(', ') : '无标签';
            
            const tableRow = `
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${blog.id}</td>
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 h-10 w-10">
                                <div class="h-10 w-10 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center">
                                    <i class="fas fa-file-alt text-white text-sm"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <div class="text-sm font-medium text-gray-900">${blog.title}</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-500 max-w-xs">
                        <div class="truncate" title="${blog.summary || '暂无摘要'}">${blog.summary || '暂无摘要'}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${blog.contentFile || '未设置'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${blog.category || '未分类'}</td>
                    <td class="px-6 py-4 text-sm text-gray-500 max-w-xs">
                        <div class="truncate" title="${tags}">${tags}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${blog.author || '未知'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${blog.authorTitle || '未设置'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${publishDate}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <div class="flex space-x-2">
                            <a href="../../frontend/AiBlog/blog-detail.html?id=${blog.id}" target="_blank" class="text-green-600 hover:text-green-900 transition-colors">
                                <i class="fas fa-eye mr-1"></i>查看
                            </a>
                            <a href="edit.html?id=${blog.id}" class="text-blue-600 hover:text-blue-900 transition-colors">
                                <i class="fas fa-edit mr-1"></i>编辑
                            </a>
                            <button onclick="console.log('删除博客:', ${blog.id})" class="text-red-600 hover:text-red-900 transition-colors">
                                <i class="fas fa-trash mr-1"></i>删除
                            </button>
                        </div>
                    </td>
                </tr>
            `;
            
            // 显示生成的HTML
            const htmlDisplay = `
                <div class="mt-4 p-4 bg-gray-100 rounded border">
                    <h3 class="font-semibold mb-2">生成的表格行HTML：</h3>
                    <div class="bg-gray-800 text-green-400 p-4 rounded text-xs overflow-x-auto">
                        <pre>${tableRow.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</pre>
                    </div>
                </div>
            `;
            document.getElementById('blogData').innerHTML += htmlDisplay;
        }

        // 页面加载完成后自动运行测试
        window.addEventListener('load', function() {
            document.getElementById('debugInfo').innerHTML = '<p class="text-blue-600">页面加载完成，点击按钮开始测试...</p>';
        });
    </script>
</body>
</html>


